/*
    分为三个rect：
        1--设置属性 + 运行按钮
        2--图片
        3--结果
*/


import QtQuick
import QtQuick.Window
import QtQuick.Controls
// import custom.colormap 1.0
import Qt3D.Input 2.4


Window {
    id: data_visualization_window
    width: 800
    height: 400
    title: "data visualization"
    x: Screen.width/2 - width/2
    y: Screen.height/2 - height/2
    color: "white"
    opacity: 1.0

    maximumHeight: data_visualization_window.height        // 防止窗口大小发生改变
    maximumWidth: data_visualization_window.width
    minimumHeight: data_visualization_window.height
    minimumWidth:data_visualization_window.width
    
    modality: Qt.WindowModal
    

    property bool sidewin_show : false      // 记录侧边栏状态
  

Rectangle{
    anchors.fill: parent
    // color: "white"
    color: "transparent"
    // Drawer{
    //     id: data_visualization_left_drawer
    //     width: 300
    //     height: parent.height
    //     interactive: false

    //     Column{
    //         anchors.fill: parent
    //         spacing: 10

    //         Rectangle{
    //             width: parent.width
    //             height: 20
    //             color: "red"
    //         }
    //         Rectangle{
    //             width: parent.width
    //             height: 20
    //             color: "red"
    //         }
    //         Rectangle{
    //             width: parent.width
    //             height: 20
    //             color: "red"
    //         }
    //     }
    // }
    // Rectangle{
    //     id: drawer_indicator

    //     // anchors.left: data_visualization_left_drawer.visible ? data_visualization_left_drawer.right : parent.left
    //     x: data_visualization_left_drawer.visible ? 300 : 0
    //     width: 20
    //     height: parent.height
    //     color: "blue"
    //     z: 5

    //     MouseArea{
    //         anchors.fill: parent
            
    //         onClicked:{
    //             if(data_visualization_left_drawer.visible)
    //             {
    //                 data_visualization_left_drawer.close()
    //                 drawer_indicator.x = 0
    //             }
    //             else{
    //                 data_visualization_left_drawer.open()
    //                 drawer_indicator.x = 300
    //             }
    //             // data_visualization_left_drawer.open()
    //             // data_visualization_left_drawer.visible = !data_visualization_left_drawer.visible
    //         }
    //     }
        
    // }


    //========================左侧rect: 参数设置+plot按钮+结果显示===============================
    Rectangle{
        id: data_visualization_rect_left
        
        
        // anchors.margins: 10
        width: 350
        height: parent.height
        x: 0- width
        z: 10

        border.width: 1
        border.color: "black"

        

        // border.width: 2
        // border.color: "lightgray"
        // radius: 5

        
        // color: "#80808055"
        color: Qt.rgba(77/255, 77/255, 77/255, 0.5)

        Behavior on x{
            NumberAnimation{
                duration: 300
            }
        }


        // -----property setting部分的label----------
        Label{
            id: data_visualization_label_property_setting
            anchors.top: parent.top
            anchors.left: parent.left
            anchors.right: parent.right
            
            anchors.margins: 5
            height: 20
            
            text: "Property Setting"
        }


        // --------------参数设置部分-------------------------
        Rectangle{
            id: data_visualization_rect_property_setting
            anchors.left: parent.left
            anchors.right:parent.right
            anchors.top: data_visualization_label_property_setting.bottom
            
            anchors.margins: 5
            
            height: 150
            border.width: 1
            border.color: "lightgray"
            radius: 5
            color: "transparent"

            
            Column{
                anchors.fill: parent
                spacing: 5
                padding: 10


                ParaRect{
                    paraName: "receiver id"
                    paraValue: fluxMapParameter.rev_id
                    paraNameWidth: 100

                    onFinishEdit: {
                        fluxMapParameter.rev_id = paraValue
                    }
                }

                // !!!!!!!!!!!!!!!!!!!选择类型这里，先暂时这么写，以后有时间改为选择框
                ParaRect{
                    paraName: "algorithm type"
                    paraValue: "ray tracing"
                    paraNameWidth: 100

                    onFinishEdit: {
                        if(paraValue === "ray tracing")
                        {
                            fluxMapParameter.algorithm_type = 0;
                        }
                        if(paraValue === "analytical function")
                        {
                            fluxMapParameter.algorithm_type = 1;
                        }
                    }
                }
                ParaRect{
                    paraName: "pixel num"
                    paraValue: fluxMapParameter.pixel_num_x
                    hasIdentity: true
                    paraIdentity: "x"
                    paraNameWidth: 100

                    onFinishEdit: {
                        fluxMapParameter.pixel_num_x = paraValue
                    }
                    
                }
                ParaRect{
                    hasName: false
                    paraValue: fluxMapParameter.pixel_num_y
                    paraIdentity: "y"
                    paraNameWidth: 100

                    onFinishEdit: {
                        fluxMapParameter.pixel_num_y = paraValue
                    }
                }

            }

        }


        // --------plot按钮---------
        Button{
            id: data_visualization_btn_run
            anchors.top: data_visualization_rect_property_setting.bottom
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.topMargin: 10
            anchors.bottomMargin: 10
            // width: 50
            // height:25

            contentItem: Text{
                text: "PLOT"
                opacity: enabled ? 1.0 : 0.3
                color: data_visualization_btn_run.down ? "#17a81a" : "#21be2b"
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                elide: Text.ElideRight
            }

            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                opacity:enabled ? 1 : 0.3
                border.color: data_visualization_btn_run.down ? "#17a81a" : "#21be2b"
                border.width:1
                radius: 2
            }
            
            onClicked:{
                console.log("run plotting!")
                // rayTracingProcessor.plotFluxMap()
                algorithmProcessor.plotFluxMap()
                // color_map.setMinMax(0,600)

                console.log("111")
                // fluxmap_entity.visible_ = true
                fluxmap_entity.updateImage();

                fluxmap_entity.max_value = fluxMapParameter.maximum_flux *  1000 * 4.0/3.0
                fluxmap_entity.receiver_width  = rayTracingParameter.pixel_length * fluxMapParameter.pixel_num_x
                fluxmap_entity.receiver_height = rayTracingParameter.pixel_length * fluxMapParameter.pixel_num_y

                
                // color_map.max_value = fluxMapParameter.maximum_flux * 1000
                // color_map.img_resolution_x = fluxMapParameter.pixel_num_x
                // color_map.img_resolution_y = fluxMapParameter.pixel_num_y
                // color_map.receiver_height = rayTracingParameter.pixel_length * fluxMapParameter.pixel_num_y
                // color_map.receiver_width =  rayTracingParameter.pixel_length * fluxMapParameter.pixel_num_x
                // color_map.setVisible();
                // color_map.rePaint();

                // flux_map_img.source = ""
                // flux_map_img.source = "./build/flux_map.png"
                // CodeImage.callQmlRefreshImg()
                
            }
        }


        // -------result demonstration部分的label-----
        Label{
            id: data_visualization_label_result_demonstration
            anchors.top: data_visualization_btn_run.bottom
            anchors.left: parent.left
            anchors.right:parent.right

            anchors.margins: 5
            height: 20
            
            text: "result demonstration"

        }

        
        // ---------show result-------------
        Rectangle{
            id: data_visualization_rect_result_demonstration
            anchors.top: data_visualization_label_result_demonstration.bottom
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: parent.bottom

            
            anchors.margins: 5
            
            border.width: 1
            border.color: "lightgray"
            radius: 5

            color: "transparent"


            Column{
                anchors.fill: parent
                spacing: 5
                padding: 10


                ParaRect{
                    paraName: "total power"
                    paraValue: fluxMapParameter.total_power.toFixed(5)
                    hasUnit: true
                    paraUnit: "kW"
                    paraNameWidth: 100

                    onFinishEdit: {
                        fluxMapParameter.total_power = paraValue
                    }
                }
                ParaRect{
                    paraName: "maximum flux"
                    paraValue: fluxMapParameter.maximum_flux.toFixed(5)
                    hasUnit: true
                    paraUnit: "kW/m2"
                    paraNameWidth: 100

                    onFinishEdit: {
                        fluxMapParameter.maximum_flux = paraValue
                    }
                    
                }
                ParaRect{
                    paraName: "maximum location"
                    paraValue: fluxMapParameter.maximum_flux_location_x
                    hasIdentity: true
                    paraIdentity: "x"

                    onFinishEdit: {
                        fluxMapParameter.maximum_flux_location_x = paraValue
                    }
                }
                ParaRect{
                    hasName: false
                    paraValue: fluxMapParameter.maximum_flux_location_y
                    hasIdentity: true
                    paraIdentity: "y"

                    onFinishEdit: {
                        fluxMapParameter.maximum_flux_location_y = paraValue
                    }
                }

                

            }
        }
        
        
        
    }

    Rectangle{
        id: siderect_popup_btn
        width: 20
        height: 20
        anchors.left: data_visualization_rect_left.right
        
        anchors.verticalCenter: data_visualization_rect_left.verticalCenter
        // color: "#C0C0C0"
        color: "white"
        z: 10

        radius: 10
        border.width: 1
        border.color: "black"

        Text{
            id: siderect_popup_btn_text
            anchors.centerIn: parent
            
            text:">>"
            wrapMode: Text.Wrap
        }

        MouseArea{
            anchors.fill: parent

            onClicked:{
                sidewin_show = !sidewin_show
                sidewin_show ? data_visualization_rect_left.x = 0 : data_visualization_rect_left.x = 0 - data_visualization_rect_left.width
                sidewin_show ? siderect_popup_btn_text.text = "<<" : siderect_popup_btn_text.text = ">>"
                console.log("window.opacity:" + data_visualization_window.opacity)
            }
        }
        
    }

    // function maximumfluxchangefunc(){
    //     console.log("----------maximum flux changed--in func----------")
    //     data_visualization_pararect_maximum_flux.paraValue = fluxMapParameter.maximum_flux// 这句不起作用，ui界面不更改

    // }
    // Component.onCompleted:{
    //     fluxMapParameter.maximumFluxChanged.connect(maximumfluxchangefunc)
    // }
    
    // Connections{
    //     target: fluxMapParameter
    //     onMaximumFluxChanged:{
    //         console.log("-----------maximum flux changed----------------")
    //         test_pararect.paraValue = fluxMapParameter.maximum_flux
    //     }
    //     onMaximumFluxLocationXChanged:{
    //         console.log("-----------maximum flux location x changed----------------")
    //         test_pararect.paraValue = fluxMapParameter.maximum_flux_location_x
    //     }
    // }
    // Connections{
    //     target: fluxMapParameter
    //     // onTotalPowerChanged(data):{
    //     //     console.log("-----------total power changed-----------------")
    //     // }
    //     onRevIdChanged:{
    //         console.log("-----------rev_id changed----------")
    //     }
        
    //     onPixelNumXChanged:{}
    //     onPixelNumYChanged:{}
    //     onFluxMapPathChanged:{}
    //     onAlgorithmTypeChanged:{}
    //     onTotalPowerChanged:{
    //         console.log("----------total_power changed------------")
            
    //     }
    //     onMaximumFluxChanged:{
    //         console.log("----------maximum flux changed------------")
    //         data_visualization_pararect_maximum_flux.paraValue = fluxMapParameter.maximum_flux// 这句不起作用，ui界面不更改

    //     }
    //     onMaximumFluxLocationXChanged:{}
    //     onMaximumFluxLocationYChanged:{}
    // }


    

    // ======================右侧rect：显示图像================================
    Rectangle{
        id: data_visualization_rect_right

        // anchors.top: parent.top
        // anchors.bottom: parent.bottom
        // anchors.left: data_visualization_rect_left.right
        // anchors.right: parent.right
        anchors.fill: parent

        clip: true
        color: "transparent"

        border.width: 2
        border.color: "blue"

        // Item{
        //     anchors.fill: parent
        //     visible: true
        //     FluxMap{

        //     }
        // }


        FluxMap{
            id: fluxmap_entity
            x_: parent.x
            y_: parent.y
            width_: parent.width
            height_: parent.height

            img_resolution_x_: fluxMapParameter.pixel_num_x
            img_resolution_y_: fluxMapParameter.pixel_num_y

            onUpdateImage:{
                updateImageInMap();
            }
        }
        
        // ColorMap{
        //     id:color_map
        //     // anchors.top: parent.top
        //     // anchors.bottom: parent.bottom
        //     // anchors.right:parent.right
        //     // width: 100
        //     // height: parent.height
            
        //     width: parent.width
        //     height: parent.height
        //     // x: parent.width/2 - img_width/2
        //     // y: parent.height/2 - img_height/2 
            
            

        //     x_offset: 40
        //     y_offset:20

            
        //     img_width: 200
        //     img_height: 200
        //     // max_value: 700
        //     x: 0
        //     y: 0

        //     font_size: 6
        //     // receiver_height: 10 
        //     // receiver_width: 20
        //     yticks_num: 6
        //     xticks_num: 6

        //     transformOrigin: Item.Center
           
        // }
        // MouseArea{
        //     id: map_drag_area
        //     anchors.fill: parent
        //     drag.target: color_map
        //     // drag.minimumX: (color_map.width > data_visualization_rect_right.width) ?  
        //     //                 (data_visualization_rect_right.width - color_map.width) : 0
        //     // drag.minimumY: (color_map.height > data_visualization_rect_right.height) ?  
        //     //                 (data_visualization_rect_right.height - color_map.height) : 0
        //     // drag.maximumX: (color_map.width > data_visualization_rect_right.width) ?  
        //     //                 0 : (data_visualization_rect_right.width - color_map.width)
        //     // drag.maximumY: (color_map.height > data_visualization_rect_right.height) ?  
        //     //                 0 : (data_visualization_rect_right.height - color_map.height)
        //     // drag.minimumX: -color_map.img_width
        //     // drag.minimumY: -color_map.img_height
        //     // drag.maximumX: color_map.img_width + 100
        //     // drag.maximumY: color_map.img_height + 100
        //     acceptedButtons: Qt.LeftButton
        //     // 使用鼠标滚轮缩放
        //     onWheel: {
        //         console.log(wheel.angleDelta);
        //         var temp = wheel.angleDelta.y / 120;
        //         var scale = color_map.scale
        //         color_map.scale = scale * (1.0 + temp/10.0)
        //         console.log(""+scale+", " + color_map.scale );
        //         color_map.width = color_map.width*scale;
        //         color_map.height = color_map.height * scale;
        //         color_map.rePaint();


        //         // console.log(tempt);
        //         // if(tempt > 0)
        //         // {
        //         //     console.log(tempt);
        //         //     color_map.scale = color_map.scale / 0.9
        //         //     color_map.rePaint();
        //         // }
        //         // else{
        //         //     console.log(tempt);
        //         //     color_map.scale = color_map.scale * 0.9
        //         //     color_map.rePaint();
        //         // }
        //     }
        // }
        
    }


}

}